/* eslint-disable react-hooks/exhaustive-deps */
import { FC, memo, useEffect, useState } from 'react'
import { ProductWrapper } from './style'
import { shallowEqualApp, useAppDispatch, useAppSelector } from '@/store'
import { fetchProductDatailAction, fetchProductListAction } from '@/store/module/product'

import LtButton from '@/base-ui/lt-button'
import LtDrawer from '@/base-ui/lt-drawer'

interface IState {
  children?: React.ReactNode
}

const Prodict: FC<IState> = memo(() => {
  // 获得页面基础数据
  const dispatch = useAppDispatch()
  useEffect(() => {
    dispatch(fetchProductListAction())
  }, [])
  const { productList, theme } = useAppSelector(
    (state) => ({
      productList: state.product.productList,
      theme: state.options.theme
    }),
    shallowEqualApp
  )

  // 监听主题变化
  const [themeColor, setThemeColor] = useState<string>(theme)
  useEffect(() => {
    if (theme === 'theme-light') {
      setThemeColor('#fff')
    } else {
      setThemeColor('#202025')
    }
    console.log(themeColor)
  }, [theme])

  // 点击去gitee
  const handleToGitee = (item: any) => {
    window.open(item.gitee_url)
  }

  // 查看产品详情
  const [open, setOpen] = useState<boolean>(false)
  const [productDetail, setProductDetail] = useState<any>({})
  const lookDetail = (item: any) => {
    setOpen(true)

    // 获得产品详情
    dispatch(fetchProductDatailAction(item.id)).then((res) => {
      setProductDetail(res.payload)
    })
  }

  // 渲染产品列表
  const renderProductList = () => {
    return productList.map((item) => {
      return (
        <div key={item.id} className="product_item">
          <div className="poster">
            <img src={item.poster} alt="poster" />
          </div>
          <h3>{item.title}</h3>
          <div className="type">
            <span>{item.type}</span>
          </div>
          <div className="btn">
            <LtButton type="danger" text="看详情" onClick={() => lookDetail(item)}></LtButton>
            <LtButton type="dark" text="去gitee" onClick={() => handleToGitee(item)}></LtButton>
          </div>
        </div>
      )
    })
  }

  // 渲染产品详情
  const renderProductDetail = () => {
    return (
      <div className="product_detail">
        <h1 className="title">{productDetail.title}</h1>
        <div className="desc">{productDetail.desc}</div>
        {productDetail.content &&
          productDetail.content.map((m: any, index: number) => {
            return (
              <div key={index}>
                <div className="sub_title">
                  <div className="text">{m.title}</div>
                </div>
                {m.image &&
                  m.image.map((n: any, i: number) => {
                    return <img key={i} src={n} alt="detail" />
                  })}
              </div>
            )
          })}
      </div>
    )
  }

  // 关闭抽屉
  const closeHandle = () => {
    setOpen(false)
  }

  return (
    <ProductWrapper>
      {/* 产品列表 */}
      <div className="product_list">{renderProductList()}</div>
      {/* 抽屉组件 产品详情 */}
      <LtDrawer
        open={open}
        onClose={closeHandle}
        size="95vh"
        borderRadius="25px"
        bgclor={themeColor}
      >
        {renderProductDetail()}
      </LtDrawer>
    </ProductWrapper>
  )
})

export default Prodict
